<!DOCTYPE html>
<html style="height: 100%">
    <head>
    <meta charset="utf-8" />
        <title>历史奖牌榜</title>
    <script type="text/javascript" src="../static/js/jquery.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/world.js"></script>
    <link rel="stylesheet" href="../static/css/comon0.css">
    <style>
        .page{
            text-align:center;
            margin-top:50px;
            }
            .page a{
            text-decoration:none;
            border:1px solid #fff;
            padding:5px 7px;
            color:#767675;
            cursor:pointer;
            }
            .page a:hover,.page span:hover{            color: red;  }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fantasy Coming Soon Responsive Widget,Login form widgets,
Sign up Web forms , Login signup Responsive web form,
Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- CSS -->
<link href="/static/css/font-awesome.css" rel="stylesheet"><!-- Font-awesome-CSS -->
<link href="/static/css/style1.css" rel='stylesheet' type='text/css'/>
<!-- //CSS -->
<!-- Fonts -->
<link href="//fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i&amp;subset=latin-ext" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&amp;subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
<!-- Fonts -->
	<!-- Favicon -->
    <link rel="shortcut icon" href="/static/images/favicon.html">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <!-- Icons -->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/ilmosys-icon.css">
    <link rel="stylesheet" href="/static/js/vendors/swipebox/css/swipebox.min.css">
    <!-- Theme CSS -->
    <link rel="stylesheet" href="/static/js/vendors/slick/slick.css">
    <!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
    <body style="height: 100%; margin: 0">
        <div id="dynamicBar" style="width:100%;height:90%;"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <!--dynamicBar(横)-->
        <script type="text/javascript" src="../static/medalslist.json"></script>
        <script type="text/javascript" src="../static/flags.json"></script>
        <script type="text/javascript">
var dom = document.getElementById("dynamicBar");
var myChart = echarts.init(dom);
var app = {};
var option;
var updateFrequency = 5000;
var dimension = 6;
var countryColors = {
        中国: 'RED',
        加拿大: '#45AD94',
        日本: '#4D57FF',
        西班牙: '#969498',
        俄罗斯: '#45ACEC',
        法国: '#A7AA62',
        意大利: '#EC9795',
        印度: '#DE9E75',
        墨西哥: '#C49E60',
        美国: '#47984B',
        英国: '#DD9CD1',
        澳大利亚: '#92B668',
        韩国: '#B2A6EC',
        巴西: '#44AFBD',
        匈牙利: '#810DF1',
        奥地利: '#19A0F0',
        苏联: 'RED',
        丹麦: '#22A2FA',
        德国: '#20236A',
        民主德国: '#FF5E4F',
        联邦德国: '#F2A2FA',
      };
    var flags =  flags;
    var data = medalslist;

    var years = [];
    for (var i = 0; i < data.length; ++i) {
        if (years.length === 0 || years[years.length - 1] !== data[i][0]) {
            years.push(data[i][0]);
        }
    }
    console.log(years);
    function getFlag(countryName) {
        if (!countryName) {
            return '';
        }
        return (flags.find(function (item) {
            return item.name === countryName;
        }) || {}).emoji;
    }
    var startIndex = 1;
    var startYear = years[startIndex];
    var option = {
        grid: {
            top: 10,
            bottom: 30,
            left: 150,
            right: 80
        },
        xAxis: {
            max: 'dataMax',
            axisLabel: {
                show: true,
                textStyle: {
                    fontSize: 25,
                    color:"#f47920",
                },
            },

            label: {
                formatter: function (n) {
                    return Math.round(n);
                }
            }
        },
        dataset: {
            source: data.slice(1).filter(function (d) {
                return d[0] === startYear;
            })
        },
        yAxis: {
            type: 'category',
            inverse: true,
            max: 10,
            axisLabel: {
                show: true,
                textStyle: {
                    fontSize: 25,
                    color:"black",
                },
                formatter: function (value) {
                    //var flg='{flag|' + getFlag(value) + '}';
                    return value;
                },
                rich: {
                    flag: {
                        fontSize: 25,
                        padding: 5
                    }
                }
            },
            animationDuration: 100000,
            animationDurationUpdate: 200
        },
        series: [{
            realtimeSort: true,
            seriesLayoutBy: 'column',
            type: 'bar',
            itemStyle: {
                color: function (param) {
                    //console.log(param);
                    return countryColors[param.value[2]] || '#5470c6';
                }
            },
            encode: {
                x: dimension,
                y: 2
            },
            label: {
                show: true,
                color:'black',
                fontSize: 20,
                precision: 1,
                position: 'right',
                valueAnimation: true,
                fontFamily: 'monospace'
            }
        }],
        // Disable init animation.
        animationDuration: 100,
        animationDurationUpdate: updateFrequency,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
        graphic: {
            elements: [{
                type: 'text',
                right: 160,
                bottom: 60,
                style: {
                    text: startYear,
                    font: 'bolder 40px monospace',
                    fill: 'rgba(0, 0, 0, 1)'
                },
                z: 100
            }]
        }
    };

    // console.log(option);
    myChart.setOption(option);

    for (var i = startIndex; i < years.length - 1; ++i) {
        (function (i) {
            setTimeout(function () {
                updateYear(years[i + 1]);
            }, (i - startIndex) * updateFrequency);
        })(i);
    }

    function updateYear(year) {
        var source = data.slice(1).filter(function (d) {
            return d[0] === year;
        });
        option.series[0].data = source;
        option.graphic.elements[0].style.text = source[0][1];
        myChart.setOption(option);
    }


if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>
